<template>
  <div class="container">
    <van-form
      @submit="onSubmit"
      ref="form"
      :validate-first="true"
      @failed="onFailed"
      :show-error-message="false"
    >
      <van-cell-group>
        <van-field label="收款人：" :value="info.userName" readonly />
        <!-- <van-cell title-class="title" :title="`微信账号：${info.wechatNo}`" /> -->
        <!-- 允许输入数字，调起带符号的纯数字键盘 -->
        <van-field
          v-model="amount"
          @input="inputHandler"
          type="number"
          :placeholder="`可提¥${info.canWithdraw}`"
          label="提现金额："
          @keyup="handleInput2"
          :rules="[
            { required: true, message: '请输入提现金额' },
            { validator, message: '最小提现金额为1.00元' },
          ]"
        />
        <van-field
          v-model="payPass"
          :type="passwordType"
          name="password"
          label="提现密码："
          placeholder="请输入密码"
          :rules="[{ required: true, message: '请输入提现密码' }]"
          bind:click-icon="switchPasswordType"
        >
          <template slot="right-icon">
            <van-icon
              class="showIcon"
              :name="passwordType == 'text' ? 'closed-eye' : 'eye-o'"
              @click="switchPasswordType"
            />
          </template>
        </van-field>
      </van-cell-group>
      <div class="tips">单次不超过5000元，单日不超过1万元</div>
      <van-button
        class="sureWithdraw"
        color="#1E1F26"
        round
        block
        type="info"
        native-type="submit"
        :disabled="disabled"
      >
        确认提现
      </van-button>
    </van-form>
  </div>
</template>

<script>
import { withdrawInfo, wxWithdraw } from '@/otherApi/index'
import { Toast } from 'vant'
import util from '@/util/util'
export default {
  data() {
    return {
      amount: null,
      info: {},
      passwordType: 'password',
      payPass: '',
      disabled: false,
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    handleInput2(e) {
      // 通过正则过滤小数点后两位
      e.target.value = e.target.value.match(/^\d*(\.?\d{0,2})/g)[0] || null
      if (e.target.value - this.info.canWithdraw >= 0) {
        e.target.value = this.info.canWithdraw
        this.$nextTick(() => {
          e.target.value = e.target.value.match(/^\d*(\.?\d{0,2})/g)[0] || null
        })
      }
    },
    validator(val) {
      return val - 1 >= 0
    },
    getInfo() {
      withdrawInfo().then((data) => {
        this.info = data
      })
    },
    switchPasswordType() {
      this.passwordType =
        this.passwordType === 'password' ? 'text' : 'password'
    },
    onFailed(values) {
      if (Array.isArray(values.errors)) {
        Toast.fail(values.errors[0].message)
      }
    },
    onSubmit() {
      if (this.amount - this.info.canWithdraw > 0 || this.amount - 5000 > 0) {
        Toast.fail(
          `提现金额不能大于${
            this.info.canWithdraw - 5000 > 0 ? 5000 : this.info.canWithdraw
          }`
        )
        return
      }
      this.disabled = true
      wxWithdraw({
        data: {
          realName: this.info.userName,
          payPass: this.payPass,
          amount: this.amount,
          requestNo: util.uuid(),
        },
      })
        .then(() => {
          this.$notify({
            type: 'success',
            message: '提现成功！',
            duration: 2000,
            onClose: () => {
              this.disabled = false
              location.reload()
            },
          })
        })
        .catch(() => {
          this.getInfo()
          this.disabled = false
          this.$refs.form.resetValidation()
        })
    },
    inputHandler(value) {
      const max = this.info.canWithdraw
      const newValue =
        max > 0 ? Math.min(value, max || 0, 5000).toString() : value
      this.money =
        value.includes('.') && !newValue.includes('.')
          ? newValue + '.'
          : newValue
      this.money = this.money.match(/^\d*(\.?\d{0,2})/g)[0]
    },
  },
}
</script>

<style lang="scss" scoped src="./styles/index.scss"></style>
